<template>
  <div v-if="$route.path !== '/login'" v-show="$store.state.headers" class="header-wrapper">
    <!-- 主导航栏 -->
    <header class="header" :class="{ 'header-light': $route.path !== '/' }">
      <div class="header-container">
        <!-- Logo区域 -->
        <div class="logo-section" @click="goHome">
          <img :src="$route.path === '/' ? require('~/assets/logo/logo-light.png') : require('~/assets/logo/logo.png')" alt="FURNITURA" class="logo" />
        </div>

        <!-- 导航菜单 -->
        <nav class="nav-menu">
          <nuxt-link :to="item.url" class="nav-item" :class="{ 'active': isActiveRoute(item.url) }"
            v-for="(item, index) in $store.state.homeMenus" :key="index">
            {{ item.title }}
          </nuxt-link>
        </nav>

        <!-- 右侧功能区 -->
        <div class="header-actions">
          <!-- 搜索模块 -->
          <div class="search-section">
            <div class="search-wrapper">
              <div class="search-input-wrapper">
                <span class="iconfont icon-search search-icon" @click="submit"></span>
                <input type="text" placeholder="搜索商品" v-model="search" class="search-input" @keyup.enter="submit" />
              </div>
            </div>
          </div>
          <div class="user-actions">
            <!-- 用户信息 -->
            <div class="user-info">
              <nuxt-link :to="{ path: '/user', query: { page_type: 0 } }" class="user-link" v-if="$auth.loggedIn">
                <div class="user-avatar" v-if="$auth.user.avatar">
                  <img :src="$auth.user.avatar" alt="用户头像" />
                </div>
                <i class="iconfont icon-yonghu user-icon" v-else></i>
                <img src="~/assets/images/king.png" class="vip-badge"
                  v-if="$auth.user.is_open_member && $auth.user.is_money_level" />
              </nuxt-link>
              <nuxt-link to="/login" class="login-link" v-else>
                <i class="iconfont icon-yonghu user-icon"></i>
              </nuxt-link>
            </div>

            <!-- 收藏 -->
            <nuxt-link :to="{ path: '/user/collect', query: { page_type: 2 } }" class="favorite-link">
              <TheIcon :icon="$route.path === '/user/collect' ? 'favorite-filled' : 'favorite'" />
            </nuxt-link>

            <!-- 购物车 -->
            <nuxt-link to="/shoppingCart" class="cart-link" :class="{ 'has-items': $route.path === '/shoppingCart' }">
              <svg class="cart-icon" width="19" height="20" viewBox="0 0 19 20" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5.65385 19.5576C5.16797 19.5576 4.75483 19.3874 4.41445 19.0471C4.07407 18.7067 3.90388 18.2936 3.90388 17.8077C3.90388 17.3218 4.07407 16.9086 4.41445 16.5683C4.75483 16.2279 5.16797 16.0577 5.65385 16.0577C6.13975 16.0577 6.55289 16.2279 6.89328 16.5683C7.23366 16.9086 7.40385 17.3218 7.40385 17.8077C7.40385 18.2936 7.23366 18.7067 6.89328 19.0471C6.55289 19.3874 6.13975 19.5576 5.65385 19.5576ZM15.3462 19.5576C14.8603 19.5576 14.4471 19.3874 14.1067 19.0471C13.7663 18.7067 13.5962 18.2936 13.5962 17.8077C13.5962 17.3218 13.7663 16.9086 14.1067 16.5683C14.4471 16.2279 14.8603 16.0577 15.3462 16.0577C15.832 16.0577 16.2452 16.2279 16.5856 16.5683C16.9259 16.9086 17.0961 17.3218 17.0961 17.8077C17.0961 18.2936 16.9259 18.7067 16.5856 19.0471C16.2452 19.3874 15.832 19.5576 15.3462 19.5576ZM4.51538 3.74998L7.05 9.05768H13.8673C13.925 9.05768 13.9763 9.04325 14.0212 9.0144C14.066 8.98555 14.1045 8.94548 14.1366 8.8942L16.8192 4.0192C16.8577 3.94868 16.8609 3.88618 16.8289 3.8317C16.7968 3.7772 16.7423 3.74995 16.6654 3.74995L4.51538 3.74998ZM3.79615 2.25003H17.6807C18.0897 2.25003 18.399 2.42406 18.6086 2.77213C18.8182 3.12021 18.8282 3.47566 18.6384 3.83847L15.4346 9.64225C15.2705 9.93072 15.0535 10.1554 14.7836 10.3163C14.5138 10.4772 14.2179 10.5576 13.8962 10.5576H6.6L5.4423 12.673C5.39102 12.75 5.38942 12.8333 5.4375 12.9231C5.48558 13.0128 5.5577 13.0577 5.65385 13.0577H16.3462C16.559 13.0577 16.7372 13.1295 16.8808 13.2731C17.0243 13.4166 17.0961 13.5948 17.0961 13.8077C17.0961 14.0205 17.0243 14.1987 16.8808 14.3423C16.7372 14.4858 16.559 14.5576 16.3462 14.5576H5.65385C4.9872 14.5576 4.48624 14.2701 4.15098 13.6952C3.81573 13.1202 3.80387 12.5461 4.1154 11.9731L5.54235 9.40765L1.90388 1.74995H0.750025C0.537192 1.74995 0.358992 1.67816 0.215425 1.53457C0.0718083 1.39099 0 1.21279 0 0.999976C0 0.787159 0.0717999 0.60896 0.2154 0.465376C0.358983 0.321793 0.537183 0.25 0.75 0.25H2.27883C2.44934 0.25 2.60832 0.295193 2.75575 0.385576C2.90318 0.475959 3.01537 0.6032 3.0923 0.7673L3.79613 2.25L3.79615 2.25003Z" />
              </svg>
              <span class="cart-count" :class="{ 'large-count': $store.state.cartnumber > 99 }"
                v-if="$store.state.cartnumber > 0">
                {{ $store.state.cartnumber > 99 ? '99+' : $store.state.cartnumber }}
              </span>
            </nuxt-link>
          </div>
        </div>
      </div>
    </header>

    <!-- 隐藏的收藏功能 -->
    <div style="display: none;">
      <a href="javascript:void(0);" @click="AddFavorite()">收藏本站</a>
      <nuxt-link :to="{ path: '/user/orderList', query: { page_type: 1 } }">我的訂單</nuxt-link>
      <nuxt-link :to="{ path: '/user/balance', query: { page_type: 3 } }">我的余額</nuxt-link>
    </div>
  </div>
</template>

<script>
import TheIcon from "~/components/TheIcon.vue";
import Logo from "~/components/Logo.vue";

export default {
  name: "headers",
  components: {
    TheIcon,
    Logo
  },
  data() {
    return {
      userInfo: {},
      service_num: "",
      search: "",
    };
  },
  created() {
    if (this.$auth.loggedIn) {
      this.gainCount();
      this.service_num = this.$auth.user.service_num;
      this.$store.commit("serviceNum", this.$auth.user.service_num);
    }
  },

  methods: {
    goHome() {
      this.$router.push({ path: "/" });
    },
    isActiveRoute(menuUrl) {
      // 处理完整URL匹配（包含查询参数）
      const currentFullPath = this.$route.fullPath;
      if (menuUrl === currentFullPath) {
        return true;
      }

      // 处理路径匹配（不包含查询参数）
      const currentPath = this.$route.path;
      if (menuUrl === currentPath) {
        return true;
      }

      // 处理带查询参数的URL
      if (menuUrl.includes('?')) {
        const [menuPath, menuQuery] = menuUrl.split('?');
        if (currentPath === menuPath) {
          const urlParams = new URLSearchParams(menuQuery);
          const routeParams = new URLSearchParams(this.$route.query);

          // 检查所有菜单URL中的查询参数是否匹配
          for (const [key, value] of urlParams) {
            if (routeParams.get(key) !== value) {
              return false;
            }
          }
          return true;
        }
      }

      return false;
    },
    AddFavorite() {
      let url = window.location;
      let title = document.title;
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("360se") > -1) {
        this.$message("由于360浏览器功能限制，请按 Ctrl+D 手动收藏！");
      } else if (ua.indexOf("msie 8") > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
      } else if (document.all) {
        try {
          window.external.addFavorite(url, title);
        } catch (e) {
          this.$message("您的瀏覽器不支持,請按 Ctrl+D 手動收藏!");
        }
      } else if (window.sidebar) {
        this.$message("您的瀏覽器不支持,請按 Ctrl+D 手動收藏!");
      } else {
        this.$message("您的瀏覽器不支持,請按 Ctrl+D 手動收藏!");
      }
    },
    gainCount: function () {
      let that = this;
      that.$axios
        .get("/cart/count", {
          params: {
            numType: 0,
          },
        })
        .then((res) => {
          that.$store.commit("cartNum", res.data.count);
        });
    },
    submit() {
      if (this.search.trim() !== "") {
        this.$router.push({
          path: "/goods_search",
          query: { title: this.search.trim() },
        });
        this.search = "";
      } else {
        this.$message.error("請輸入要搜索的内容");
      }
    },


  },
};
</script>

<style scoped lang="scss">
@import '~/assets/css/variables.scss';

* {
  &:focus {
    outline: none;
  }
}

button,
a,
input,
select,
textarea {
  &:focus {
    outline: none;
    box-shadow: none;
  }
}

.header-wrapper {
  padding-top: 80px;
}

.header {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;

  &.header-light {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  }

  .header-container {
    width: 100%;
    height: 100%;
    padding: 0 min(160px, 8vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 20px;

    .logo-section {
      display: flex;
      align-items: center;
      cursor: pointer;

      .logo {
        height: 40px;
        width: auto;
      }

      .nuxt-logo {
        height: 40px;
        width: auto;
      }

      .logo-text {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
      }
    }

    .nav-menu {
      display: flex;
      align-items: center;
      margin: 0 auto;
      gap: 40px;

      .nav-item {
        color: #fff;
        padding: 8px 0;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        white-space: nowrap;
        letter-spacing: 1px;
        transition: color 0.3s ease;

        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 50%;
          width: 0;
          height: 1px;
          background-color: $primary-color-bright;
          transition: all 0.3s ease;
          transform: translateX(-50%);
        }

        &:hover {
          color: $primary-color-bright;

          &::after {
            width: 100%;
          }
        }

        &.active {
          color: $primary-color-bright;

          &::after {
            width: 100%;
          }
        }
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      align-items: center;
      gap: 60px;

      .search-section {
        display: flex;
        align-items: center;
        justify-content: center;

        .search-wrapper {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 100%;
          max-width: 320px;

          .search-input-wrapper {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(139, 90, 43, 0.2);
            border-radius: 6px;
            padding: 8px 12px;
            flex: 1;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            &:hover {
              border-color: $primary-color-bright;
              box-shadow: 0 2px 8px rgba(139, 90, 43, 0.15);
            }

            &:focus-within {
              border-color: $primary-color-bright;
              box-shadow: 0 2px 12px rgba(139, 90, 43, 0.2);
            }

            .search-icon {
              color: #999;
              font-size: 16px;
              margin-right: 8px;
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover {
                color: $primary-color-bright;
              }

              &:active {
                transform: scale(0.95);
              }
            }

            .search-input {
              border: none;
              outline: none;
              background: transparent;
              flex: 1;
              font-size: 14px;
              color: #333;
              font-weight: 400;

              &::placeholder {
                color: #999;
                font-size: 14px;
              }
            }
          }


        }
      }

      .user-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;

        .user-info {

          .user-link,
          .login-link {
            display: flex;
            align-items: center;
            gap: 8px;
            color: $text-color;
            text-decoration: none;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;

            &:hover {
              .icon {
                stroke: $primary-color-bright;
              }

              .user-icon {
                color: $primary-color-bright;
              }
            }

            .user-avatar {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              overflow: hidden;

              &:hover {
                border: 1px solid $primary-color;
              }

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .user-icon {
              font-size: 24px;
              color: $bg-white;
              font-weight: 500;
              text-shadow: 0 0 0.5px currentColor;
              transition: color 0.3s ease;
            }

            .vip-badge {
              width: 16px;
              height: 16px;
              position: absolute;
              top: -2px;
              right: -2px;
            }
          }
        }

        .favorite-link {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px;
          border-radius: 50%;
          transition: all 0.3s ease;
          text-decoration: none;
          color: $bg-white;

          &:hover {
            color: $primary-color-bright;

            .icon {
              stroke: $primary-color-bright;
            }
          }

          &.nuxt-link-active {
            color: $primary-color-bright;

            .icon {
              stroke: $primary-color-bright;
              fill: $primary-color-bright;
            }
          }

          .icon {
            transition: all 0.3s ease;
            stroke: currentColor;
            fill: currentColor;
          }

        }

        .cart-link {
          position: relative;
          display: flex;
          align-items: center;
          padding: 8px;
          border-radius: 50%;
          transition: background-color 0.3s ease;
          text-decoration: none;

          .cart-icon {
            width: 24px;
            height: 24px;
            fill: $bg-white;
            transition: fill 0.3s ease;
          }

          &:hover {
            .cart-icon {
              fill: $primary-color-bright;
            }
          }

          // 購物車頁面激活狀態
          &.has-items {
            .cart-icon {
              fill: $primary-color;
            }
          }

          .cart-count {
            position: absolute;
            top: -2px;
            right: -2px;
            background: $primary-color-bright;
            color: $bg-white;
            font-size: 10px;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
            transform: scale(1);
            animation: cart-badge-pulse 0.3s ease-out;

            // 白色背景模式下的購物車徽章樣式
            .header-light & {
              border-color: rgba(255, 255, 255, 0.9);
              box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
            }

            // 當數量大於99時調整樣式
            &.large-count {
              min-width: 20px;
              height: 16px;
              border-radius: 8px;
              font-size: 9px;
              padding: 0 2px;
            }
          }
        }
      }
    }
  }

  // 白色背景模式下的樣式調整
  &.header-light {
    .nav-menu .nav-item {
      color: $text-color;

      &:hover {
        color: $primary-color;
      }

      &.active {
        color: $primary-color;
      }
    }

    .user-actions {
      .user-icon {
        color: $text-color !important;

        &:hover {
          color: $primary-color !important;
        }
      }

      .favorite-link {
        color: $text-color !important;

        &:hover {
          color: $primary-color !important;
        }
      }

      .cart-icon {
        fill: $text-color !important;

        &:hover {
          fill: $primary-color !important;
        }
      }
    }
  }
}

// 响应式设计
.header-wrapper {
  padding-top: 60px;

  @media (max-width: 768px) {
    .header {
      .header-container {
        max-width: calc(100vw - 32px);
        padding: 0 16px;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 10px;
      }

      .nav-menu {
        display: none;
      }

      .search-section {
        .search-wrapper {
          max-width: 200px;
          gap: 4px;

          .search-input-wrapper {
            padding: 6px 12px;

            .search-input {
              font-size: 12px;

              &::placeholder {
                font-size: 12px;
              }
            }
          }

          .search-btn {
            padding: 6px 12px;
            font-size: 12px;
          }
        }
      }

      .header-actions {
        gap: 16px;

        .user-info {
          .username {
            display: none;
          }
        }
      }
    }
  }

  // 保持原有的动画效果
  @keyframes notification-pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  // 購物車徽章動畫
  @keyframes cart-badge-pulse {
    0% {
      transform: scale(0.8);
      opacity: 0.8;
    }

    50% {
      transform: scale(1.1);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .notification-link {
    .notification-icon {
      animation: notification-pulse 2s infinite ease-in-out;
    }
  }
}
</style>
